import { Button, Typography, styled } from '@mui/material'
import CardList from '../components/cardlist/cardlist'
import SearchResult from '../components/catalog/searchResult'
import { useContext } from 'react'
import { AppContext } from '../store/storeProvider'
import { useNavigate } from 'react-router-dom'
import { useGetProduct } from '../store/hooks'

const StyledContainer = styled('div')(() => ({
	display: 'flex',
	marginBottom: '10px',
	width: '992px',
	justifyContent: 'flex-start',
	flexDirection: 'column',
}))

const StyledHeader = styled(Typography)(() => ({
	display: 'flex',
	styleName: 'Header : H1/ExtraBold',
	fontFamily: 'Nunito',
	fontSize: '28px',
	fontWeight: '800',
	lineGeight: '32px',
	letterSpacing: '0em',
	textAlign: 'left',
}))

const StyledButton = styled(Button)(() => ({
	width: 'fit-content',
	textTransform: 'none',
	color: '#7B8E98',
	fontFamily: 'Nunito',
	fontSize: '14px',
	border: '0',
}))

const Catalog = () => {
	const { state } = useContext(AppContext)

	const navigate = useNavigate()

	useGetProduct()

	return (
		<StyledContainer>
			<StyledButton onClick={() => navigate(-1)}>{'< Назад'}</StyledButton>

			<StyledHeader>Каталог</StyledHeader>
			<SearchResult request={state.search} quantity={0} />
			<CardList />
		</StyledContainer>
	)
}

export default Catalog
